<template>
	<!-- Hello World! -->
	<div>
		<div class="rcon1">
			<div class="yuan" @tap="goTo1">
				<div class="y">1</div>
				<div class="inc">第一步</div>
			</div>
			<div class="yuan" >
				<div class="y">2</div>
				<div class="inc">第二步</div>
			</div>
			<div class="yuan" @tap="goTo3">
				<div class="y">3</div>
				<div class="inc">第三步</div>
			</div>
		</div>
		<div class="rebk">
			<div class="sel">
				2.请选择对口心理中心教师（单选）
			</div>
			<div class="iconcon">
				<div class="icon"
					v-for="(teacher, index) in teachers"
					:key="index"
					@click="selectTeacher(index)"
					:class="{ 'icon-selected': selectedIndex === index }">
					<div class="yuan2">
						<div class="ln2">{{ teacher.avatarChar }}</div>
					</div>
					<div class="name">{{ teacher.name }}</div>				
					<div class="check-mark" v-if="selectedIndex === index">
						<i class="fa fa-check"></i>
					</div>
				</div>
				<div class="bre">默认发送</div>
				<div class="bre2">
					学工部xx副部长、学工部xxx副部长、学院副书记、学工部xxx、学工办主任心理中心教师xxx
				</div>
				<div class="kuai">
					<div class="ti2">
						<div class="org"></div>
						<div class="stu">选定学生</div>
					</div>
					<div class="button-group">
					    <button class="search-btn" @click="showStudentList = true">搜索学生选定</button>
					    <button class="add-btn" @click="showBlankForm = true">新增空白表单</button>
					</div>
				</div>
				<!-- 初始界面 - 搜索和已添加学生列表 -->
				<div class="big-container" v-if="!showBlankForm">
				    <div class="chaxun">
				        <input type="text" placeholder="请输入姓名、学号模糊查询" v-model="searchQuery" />
				    </div>
				    
				    <!-- 已添加学生列表，点击搜索后显示 -->
				    <div v-if="showStudentList" class="added-students-list">
				        <div class="addstu">已添加学生</div>
				        <div class="student-item" v-for="(student, index) in filteredStudents" :key="index">
				            {{ student.name }} - {{ student.id }}
				            <button class="remove-btn" @click="removeStudent(index)">移除</button>
				        </div>
				        
				        <!-- 搜索结果 -->
				        <div v-if="searchResults.length > 0 && searchQuery" class="search-results">
				            <div class="result-title">搜索结果：</div>
				            <div class="student-item" v-for="(student, index) in searchResults" :key="'result_' + index">
				                {{ student.name }} - {{ student.id }}
				                <button class="add-btn-small" @click="addStudent(student)">添加</button>
				            </div>
				        </div>
				    </div>
				</div>
				
				<!-- 空白表单界面 -->
				<div class="blank-form-container" v-if="showBlankForm">
					<div class="form-container">
						<div class="form-group">
							<label>学生姓名：</label>
							<input type="text" v-model="newStudent.name" placeholder="请输入姓名" />
						</div>
						<div class="form-group">
							<label>学号：</label>
							<input type="text" v-model="newStudent.id" placeholder="请输入学号" />
						</div>
						<div class="form-group">
							<label>性别：</label>
							<input type="text" v-model="newStudent.gender" placeholder="请输入性别" />
						</div>
						<div class="form-group">
							<label>家庭住址：</label>
							<input type="text" v-model="newStudent.address" placeholder="请输入家庭住址" />
						</div>
						<div class="form-group">
							<label>详细地址：</label>
							<input type="text" v-model="newStudent.detailAddress" placeholder="请输入详细地址" />
						</div>
						<div class="form-group">
							<label>学院：</label>
							<input type="text" v-model="newStudent.college" placeholder="请输入学院" />
						</div>
						<div class="form-group">
							<label>专业：</label>
							<input type="text" v-model="newStudent.major" placeholder="请输入专业" />
						</div>
						<div class="form-group">
							<label>班级：</label>
							<input type="text" v-model="newStudent.className" placeholder="请输入班级" />
						</div>
						<div class="form-group">
							<label>宿舍号：</label>
							<input type="text" v-model="newStudent.dormitory" placeholder="请输入宿舍号" />
						</div>
						<div class="form-group">
							<label>辅导员姓名：</label>
							<input type="text" v-model="newStudent.counselor" placeholder="请输入辅导员姓名" />
						</div>
						<button class="add-student-btn" @click="addNewStudent">添加到列表</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				teachers: [
					{ avatarChar: "张", name: "张三" },
					{ avatarChar: "李", name: "李四" },
					{ avatarChar: "王", name: "王五" },
					{ avatarChar: "赵", name: "赵六" },
					{ avatarChar: "孙", name: "孙七" },
					{ avatarChar: "周", name: "周八" },
					{ avatarChar: "吴", name: "吴九" },
					{ avatarChar: "郑", name: "郑十" },
					{ avatarChar: "钱", name: "钱十一" },
					{ avatarChar: "孙", name: "孙十二" },
				],
				selectedIndex: -1,
				// 学生相关数据
				addedStudents: [
					{ name: "张明", id: "2021001", major: "计算机科学", phone: "13800138000" },
					{ name: "李华", id: "2021002", major: "软件工程", phone: "13900139000" }
				],
				// 模拟搜索池
				allStudents: [
					{ name: "张明", id: "2021001", major: "计算机科学", phone: "13800138000" },
					{ name: "李华", id: "2021002", major: "软件工程", phone: "13900139000" },
					{ name: "王芳", id: "2021003", major: "电子信息", phone: "13700137000" },
					{ name: "赵伟", id: "2021004", major: "自动化", phone: "13600136000" },
					{ name: "刘强", id: "2021005", major: "机械工程", phone: "13500135000" }
				],
				searchQuery: "",
				showStudentList: false,
				searchResults: [],
				// 空白表单相关
				showBlankForm: false,
				newStudent: {
					name: "",
					id: "",
					gender: "",
					addressArea: "",
					detailAddress: "",
					college: "",
					major: "",
					className: "",
					dormitory: "",
					counselor: ""
				}
			};
		},
		computed: {
			filteredStudents() {
				// 过滤已添加的学生列表
				if (!this.searchQuery) {
					return this.addedStudents;
				}
				return this.addedStudents.filter(student => 
					student.name.includes(this.searchQuery) || 
					student.id.includes(this.searchQuery)
				);
			}
		},
		methods: {
			goTo3()
			{
				console.log('第三步被点击了！！！');
				uni.navigateTo({url: '/pages/report/report3'});
			},
			goTo1()
			{
				console.log('第一步被点击了！！！');
				uni.navigateTo({url: '/pages/report/report'});
			},
			selectTeacher(index) {
				this.selectedIndex = index;
			},
			showAddedStudents() {
				this.showStudentList = true;
				// 如果有搜索内容，执行搜索
				if (this.searchQuery) {
					this.performSearch();
				}
			},
			performSearch() {
				// 搜索所有学生中符合条件的，但排除已添加的
				this.searchResults = this.allStudents.filter(student => {
					const matchesSearch = student.name.includes(this.searchQuery) || 
										  student.id.includes(this.searchQuery);
					const notAdded = !this.addedStudents.some(s => s.id === student.id);
					return matchesSearch && notAdded;
				});
			},
			addStudent(student) {
				// 添加学生到已选列表
				this.addedStudents.push(student);
				// 从搜索结果中移除
				this.searchResults = this.searchResults.filter(s => s.id !== student.id);
			},
			removeStudent(index) {
				// 从已添加列表移除学生
				this.addedStudents.splice(index, 1);
			},
			addNewStudent() {

				
				// 添加新学生到已添加列表
				this.addedStudents.push({...this.newStudent});
				
				// 重置表单
				this.newStudent = {
					name: "",
					id: "",
					gender: "",
					addressArea: "",
					detailAddress: "",
					college: "",
					major: "",
					className: "",
					dormitory: "",
					counselor: ""
				};
				
				// 提示成功
			}
		},
		watch: {
			searchQuery() {
				if (this.showStudentList) {
					this.performSearch();
				}
			}
		}
	};
</script>

<style>
	.kuai
	{
		display: block;
	}
	/* 原有样式保持不变 */
	.big-container {
	    padding: 20px;
	}
	.button-group {
	        display: flex;
			margin-left: 120rpx;
	        margin-top: 10px; /* 与上方内容拉开距离 */
	        margin-bottom: 10px;
	}
	.search-btn 
	{
		padding: 5px 15px;
	    background-color: #276EFF;
	    color: #fff;
	    border: none;
	    border-radius: 4px 0 0 4px;
	    cursor: pointer;
	}
	.add-btn 
	{
		    padding: 5px 15px;

	    background-color: #fff;
	    color: #276EFF;
	    border: 1px solid #276EFF;
	    padding: 2px 16px;
	    border-radius: 0 4px 4px 0;
	    cursor: pointer;
	}
	.chaxun {
	    margin-bottom: 10px;
	}
	.chaxun input {
	    width: 300px;
	    padding: 8px;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	}
	.addstu {
	    color: #333;
	    margin-bottom: 10px;
	    font-weight: bold;
	}
	.ti2
	{
		display: flex;
	}
	.stu
	{
		margin-top: 15rpx;
		margin-left: 10rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 32rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.org
	{
		margin-left: 38rpx;
		margin-top: 20rpx;
		width: 10rpx;
		height: 38rpx;
		background: #ffa216;
	}
	.bre2
	{
		width: 678rpx;
		height: 94rpx;
		margin-top: 22rpx;
		margin-left: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #666;
	}
	.bre
	{
		margin-top: 22rpx;
		margin-left: 32rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 28rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.name
	{
		margin-top: 52rpx;
		margin-left: 50rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 28rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.ln2
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 44rpx;
		text-align: left;
		color: #fff;
	}
	.yuan2
	{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 26rpx;
		margin-top: 32rpx;
		border-radius: 50%;
		width: 88rpx;
		height: 88rpx;
		background: #276eff;
	}
	.icon
	{
		display: flex;
		width: 330rpx;
		height: 150rpx;
		background: white;
		margin-top: 16rpx;
		margin-left: 32rpx;
		filter: drop-shadow(0 0 0 #00000014);
	}
	.icon-selected {
		border: 2px solid #276EFF;
		border-radius: 4px;
	}
	.iconcon
	{
		    display: block; /* 改为块级显示，使内部元素换行排列 */

		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.rebk
	{
		width: 750rpx;
		min-height: 2000rpx;
		background: #f2f4f7;
	}
	.sel
	{
		margin-top: 16rpx;
		margin-left: 52rpx;
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 32rpx;
		text-align: left;
		color: #1a1a1a;
	}
	.rcon1
	{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 164rpx;
		background: #276EFF;
		position: relative;
	}
	.yuan
	{
		width: 60rpx;
		height: 60rpx;
		background: #fff;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}
	.inc
	{
		font-family: "PingFang SC Bold";
		font-weight: 700;
		font-size: 20rpx;
		text-align: center;
		color: #fff;
	}
	.y
	{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #fff;
		border: 2rpx solid #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #276eff;
		font-weight: bold;
		z-index: 1;
	}
	/* 新增样式 */
	.added-students-list {
		margin-top: 10px;
		padding: 10px;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.student-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}
	
	.remove-btn {
		background-color: #ff4d4f;
		color: white;
		border: none;
		padding: 2px 8px;
		border-radius: 2px;
		cursor: pointer;
	}
	
	.add-btn-small {
		background-color: #276EFF;
		color: white;
		border: none;
		padding: 2px 8px;
		border-radius: 2px;
		cursor: pointer;
	}
	
	.search-results {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px dashed #ccc;
	}
	
	.result-title {
		font-weight: bold;
		margin-bottom: 8px;
		color: #666;
	}
	
	/* 空白表单样式 */
	.blank-form-container {
		padding: 20px;
	}
	
	.back-btn {
		background-color: #666;
		color: #fff;
		border: none;
		padding: 2px 16px;
		border-radius: 4px 0 0 4px;
		cursor: pointer;
	}
	
	.save-btn {
		background-color: #276EFF;
		color: #fff;
		border: none;
		padding: 2px 16px;
		border-radius: 0 4px 4px 0;
		cursor: pointer;
	}
	
	.form-fields {
		margin-top: 15px;
		background-color: #fff;
		padding: 15px;
		border-radius: 4px;
	}
	
	.form-group {
		margin-bottom: 15px;
	}
	
	.form-group label {
		display: inline-block;
		width: 100px;
		font-weight: bold;
	}
	
	.form-group input, 
	.form-group textarea {
		width: 300px;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	
	.form-group textarea {
		height: 100px;
		resize: vertical;
	}
	
	.add-student-btn {
		background-color: #276EFF;
		color: white;
		border: none;
		padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 10px;
	}
	
	.check-mark {
		position: absolute;
		right: 10px;
		top: 10px;
		color: #276EFF;
		font-size: 20px;
	}
	
</style>
